<%--
  Created by IntelliJ IDEA.
  User: name
  Date: 2023/10/9
  Time: 14:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加盘点</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>

<div id="app">


    <el-select v-model="searchBranchList" clearable placeholder="--请选择分店--" style="width: 15%">
        <el-option
                v-for="item in branchList"
                :key="item.branchid"
                :label="item.branchname"
                :value="item.branchid">
        </el-option>
    </el-select>
    <el-button
            type="primary"
            @click="search()">查询
    </el-button>
    <br><br>
    <el-button size="mini" type="primary" @click="addDialog()">新增盘点</el-button>
    <el-table
            :cell-style="{'text-align':'center'}"
            :header-cell-style="{'text-align':'center'}"
            :data="tableData"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%">

        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                fixed

                prop="goods.goodsid"
                label="商品编号"
                width="90px"
        >
        </el-table-column>
        <el-table-column
                label="商品图片"
                width="150px"
                height="50px"
        >
            <template slot-scope="scope">
                <%--                </el-button>--%>
                <el-image
                        style="width: 120px;height: 50px;"
                        :src="scope.row.goods.url"></el-image>
            </template>
        </el-table-column>
        <el-table-column
                prop="goods.goodsname"
                label="商品名称"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="goods.layout"
                label="键盘布局"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="keyCap.keycapname"
                label="键帽材质"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="keyBoardColor.keyboardcolorname"
                label="键盘颜色"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="goods.shafttype"
                label="轴体类型"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="shaftChoose.shaftchoose"
                label="轴体选择"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="goods.interfacetype"
                label="接口类型"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="backLightColor.backlightcolorname"
                label="背光颜色"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="goods.cprice"
                label="商品进价"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="goods.sprice"
                label="商品售价"
                width="120px"
        >
        </el-table-column>
        <el-table-column
                prop="branch.branchname"
                label="店铺名称"
                width="220px"
        >
        </el-table-column>
        <el-table-column
                prop="counts"
                label="商品数量"
                width="120px"
                fixed="right"
        >
        </el-table-column>
        <el-table-column
                label="盘点数量"
                width="120px"
                fixed="right"
        >
            <template slot-scope="scope">
                <el-input v-model="forminvennum[scope.row.id]" placeholder="盘点数量"
                          @change="handleChange(scope.row.id,scope.row.counts)"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                label="报损数量"
                width="120px"
                fixed="right"
        >
            <template slot-scope="scope">
                <el-input v-model="formlossnum[scope.row.id]" placeholder="报损数量"
                          @change="handleChange2(scope.row.id,scope.row.counts)"></el-input>
            </template>
        </el-table-column>

    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>


    <!--确定盘点申请的对话框
             visible.sync：控制对话框的显示true和隐藏false
         -->
    <el-dialog
            title="信息"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="addDialogClose"
    >
        <span style="font-size: 20px">进行盘点申请吗</span>

        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirmAdd">确 定</el-button>
                <el-button @click="addDialogClose">取 消</el-button>
              </span>
    </el-dialog>


</div>

<script>

    let app = new Vue({
        el: "#app",
        data: {
            //分页数据
            currentPage: 1,
            pageSize: 5,
            total: null,
            //表格数据
            tableData: [],
            //控制修改对话框
            dialogVisible2: false,
            //添加表单对象
            addForm: {},
            //下拉框集合
            branchList: [],

            //搜索栏的值
            searchBranchList: "",

            //多选框选中的行
            multipleSelection: [],

            //盘点数量
            forminvennum: {},
            //报损数量
            formlossnum: {},

            //添加时提交的数据
            addlist: [],
            //分店名称
            branchname:"",

            //是否有未审核的盘点
            state:""

        },
        created() {
            this.initTable();
            this.searchBranch();
            this.getBranchName();
            this.checkState();
        },
        methods: {
            initTable() {
                axios.get("/goods/allGoods?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize + "&staffBranchid=12138").then(resq => {
                    this.tableData = resq.data.data.list
                    this.total = resq.data.data.total
                })
            },
            handleSizeChange(val) {
                this.pageSize = val
                // this.initTable()
                this.search(val)
            },
            handleCurrentChange(val) {
                this.currentPage = val
                // this.initTable()
                this.search(val)
            },

            //检查是否已有未审核的盘点
            checkState(){
                axios.get("/inventory/checkState").then(resp => {
                    this.state=resp.data.code
                })
            },

            //添加按钮事件
            addDialog() {
                //判断是否有选中多选框，没有则弹出警告
                if(this.multipleSelection[0]==null){
                    this.$message({
                        message: '请选择要提交盘点的商品！',
                        type: 'warning'
                    });
                    return;
                }

                //判断是否为自己的分店,否则不显示添加框并弹出警告
                let isThisBranch=true;
                for (let x of this.multipleSelection) {
                    if(this.branchname!=x.branch.branchname){
                        isThisBranch=false;
                        break;
                    }
                }

                //判断是否输入数据，没有则弹出警告
                for (let x of this.multipleSelection) {
                    if(this.forminvennum[x.id]==""||this.forminvennum[x.id]==null){
                        this.$message({
                            message: '请检查你的数据结构',
                            type: 'warning'
                        });
                        return;
                    }
                }

                if(isThisBranch){
                    this.dialogVisible2 = true;
                }else{
                    this.$message({
                        message: '对不起，你没有权限盘点改分店商品!',
                        type: 'warning'
                    });
                }
            },
            //获取分店名称
            getBranchName() {
                axios.get('/main/getAllInfo').then(res => {
                    this.branchname = res.data.data.staff.branchname;
                })
            },
            //确认添加按钮事件
            confirmAdd() {
                if(this.state==500){
                    this.$message({
                        message: '还有盘点未审核，无法新增盘点!',
                        type: 'warning'
                    });
                    this.dialogVisible2 = false;
                    return;
                }
                this.$message({
                    message: '添加盘点成功!',
                    type: 'success'
                });
                //将数据放入数组
                for (let x of this.multipleSelection) {
                    let obj={
                        goodsid:x.goods.goodsid,
                        invennum:this.forminvennum[x.id],
                        lossnum:this.formlossnum[x.id]
                    }
                    this.addlist.push(obj)
                }

                axios.post("/inventory/addInventory", this.addlist).then(resp => {
                    //刷新页面
                    this.initTable();
                    //关闭对话框
                    this.dialogVisible2 = false;
                    this.addlist=[]
                    this.forminvennum={}
                    this.formlossnum={}
                    this.multipleSelection=[]
                })
            },
            //添加弹窗关闭事件
            addDialogClose() {
                this.dialogVisible2 = false
            },

            /**
             * 获取下拉框所需的数据
             * **/
            searchBranch() {
                axios.post("/goods/searchBranch").then(resp => {
                    this.branchList = resp.data.data
                })
            },

            //根据分店查
            search(val) {
                if(val!=null){
                    this.currentPage=val
                }else{
                    this.currentPage=1
                }
                axios.get("/goods/searchGoods?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize + "&searchBranchList=" + this.searchBranchList).then(resq => {
                    this.tableData = resq.data.data.list
                    this.total = resq.data.data.total
                })
            },
            //多选框选中事件
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            //盘点数量或报损数量输入框改变事件
            //id分店商品id、counts商品数量
            //盘点数量: this.forminvennum[id]
            //报损数量: this.formlossnum[id]
            handleChange(id, counts) {
                if (this.forminvennum[id] != null && this.forminvennum[id] != '') {
                    if (this.forminvennum[id] <= counts && this.forminvennum[id] >= 0) {
                        this.$set(this.formlossnum, [id], counts - this.forminvennum[id])
                    } else {
                        this.$set(this.forminvennum, [id], '')
                        this.$set(this.formlossnum, [id], '')
                        this.$message({
                            message: '输入数量有误',
                            type: 'warning'
                        });
                    }
                }
            },
            handleChange2(id, counts) {
                if (this.formlossnum[id] != null && this.formlossnum[id] != '') {
                    if (this.formlossnum[id] <= counts && this.formlossnum[id] >= 0) {
                        this.$set(this.forminvennum, [id], counts - this.formlossnum[id])
                    } else {
                        this.$set(this.forminvennum, [id], '')
                        this.$set(this.formlossnum, [id], '')
                        this.$message({
                            message: '输入数量有误',
                            type: 'warning'
                        });
                    }
                }
            }


        }
    })


</script>

</body>
</html>
